<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/home/product/spumanage"
        >商品管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>新增商品</el-breadcrumb-item>
      <el-breadcrumb-item>添加详情</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>
    <el-steps :active="3" simple style="margin-top: 20px">
      <el-step title="类目选择" icon="el-icon-files"></el-step>
      <el-step title="添加属性" icon="el-icon-s-operation"></el-step>
      <el-step title="添加图片" icon="el-icon-picture-outline"></el-step>
      <el-step title="添加详情" icon="el-icon-notebook-2"></el-step>
    </el-steps>

    <div class="box">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <h3 style="line-height: 32px">
              <i class="el-icon-notebook-2"></i> &nbsp; 商品详情
            </h3>
          </div>
        </el-col>
      </el-row>
      <div class="divider"></div>

      <div id="weditor"></div>

      <div class="divider"></div>

      <el-button @click="$router.go(-1)">上一步，添加图片</el-button>
      <el-button type="primary" @click="submit()">确认，添加SPU</el-button>
    </div>
  </div>
</template>
<script>
import LocalStorage from "@/common/StorageUtils.js";

export default {
  data() {
    return {
      editor: {},   // 表示富文本编辑器对象
      ruleForm: {}, // 完整的SPU表单数据
    };
  },

  mounted() {
    this.editor = new this.WEditor("#weditor");
    this.editor.config.uploadImgServer =
      "http://localhost:9060/upload/picture/single";
    this.editor.config.uploadFileName = "file";
    // 设置回调 处理服务端返回数据结构，使得图片可以插入富文本编辑器
    this.editor.config.uploadImgHooks = {
      // 图片上传并返回了结果，想要自己把图片插入到编辑器中
      // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
      customInsert: function (insertImgFn, result) {
        // result 即服务端返回的接口
        console.log("customInsert", result);
        // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
        insertImgFn(result.data.url);
      },
    };
    this.editor.create();
    // 动态加载完整的Form表单
    this.ruleForm = LocalStorage.get(LocalStorage.KEY_ADD_SPU);
    if (this.ruleForm.detail) {
      // 已经创建了相册
      this.editor.txt.html(this.ruleForm.detail);
    }
  },

  methods: {
    /** 提交完整的表单，新增SPU */
    submit() {
      // 将富文本存入表单
      let html = this.editor.txt.html();
      this.ruleForm.detail = html;
      // 表单整理完毕
      console.log("完整表单数据", this.ruleForm);
      // 提交表单，新增SPU
      this.$api.spuApi.add(this.ruleForm).then((res) => {
        console.log("新增SPU", res);
        if (res.data.state == 200) {
          this.$message({
            showClose: true,
            message: "商品添加成功",
            type: "success",
          });
          this.$router.push("/home/product/addspu/1");
          // 清除本地缓存
          LocalStorage.remove(LocalStorage.KEY_ADD_SPU)
        } else {
          this.$alert(res.data.message, "提示");
        }
      });
    },
  },
};
</script>
